<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >{{ $route.params.title }}</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="now-index">
      <p>单选题（{{ current + 1 }}/{{ testData.length }}）</p>
    </div>
    <div class="content">
      <van-swipe
        class="my-swipe"
        @change="onChange"
        :loop="false"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(item, index) in testData" :key="index">
          <div class="test-box">
            <p class="title">{{ index + 1 }}、{{ item.question }}</p>
            <van-radio-group v-model="item.radio">
              <van-radio
                v-for="(items, indexs) in item.choice"
                :key="indexs"
                :name="indexs"
                @click="radioClick(indexs, item)"
                >{{
                  indexs == "0"
                    ? "A"
                    : indexs == "1"
                    ? "B"
                    : indexs == "2"
                    ? "C"
                    : indexs == "3"
                    ? "D"
                    : "E"
                }}、{{ items }}</van-radio
              >
            </van-radio-group>
          </div>
          <div class="answer" v-show="item.daan">
            <p class="a success" v-if="item.daan && item.daan.correct == 0">
              <van-icon size="0.2rem" color="#009c00" name="success" />回答正确
            </p>
            <p class="a fail" v-else>
              <van-icon size="0.2rem" color="red" name="cross" />回答错误
            </p>
            <p class="right">
              正确答案：{{
                item.daan && item.daan.info.rightAnswer == 0
                  ? "A"
                  : item.daan && item.daan.info.rightAnswer == 1
                  ? "B"
                  : item.daan && item.daan.info.rightAnswer == 2
                  ? "C"
                  : item.daan && item.daan.info.rightAnswer == 3
                  ? "D"
                  : "E"
              }}
            </p>
            <p class="t">题目解析:</p>
            <p class="c">
              {{ item.daan && item.daan.info.analysis }}
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import navbar from "@/components/navbar";
import { getQuestionby, setRecord } from "@/api/doctor";
import { Toast, Dialog, Swipe, SwipeItem } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "testDetail",
  data() {
    return {
      current: 0,
      testData: [],
      radio: "",
      activeIcon: require("../../assets/images/cha.png"),
      inactiveIcon: require("../../assets/images/round1.png"),
    };
  },

  components: { navbar },

  computed: { ...mapGetters(["userData"]) },

  created() {
    this.getData();
  },
  mounted() {},

  watch: {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/aiTest" });
    },
    onChange(index) {
      this.current = index;
      window.scroll(0, 0);
    },
    //数据
    getData() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      let data = {
        subjectsId: this.$route.params.subjectsId,
      };
      getQuestionby(data).then((res) => {
        if (res.data.status == 200) {
          this.testData = res.data.info;
          this.testData.forEach((item, index) => {
            if (item.radio != null) {
              this.radioClick(item.radio, item, index);
            }
          });
          Toast.clear();
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    //
    radioClick(i, item, num) {
      let data = {
        userId: JSON.parse(this.userData).id,
        questionId: item.questionId,
        answer: i,
        subjectsId: this.$route.params.subjectsId,
        radio: this.current,
      };
      setRecord(data).then((res) => {
        if (res.data.status == 200) {
          // this.testData[this.current].daan = res.data;
          if (num) {
            this.$set(this.testData[num], "daan", res.data);
          } else {
            this.$set(this.testData[this.current], "daan", res.data);
          }
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  & .now-index {
    position: fixed;
    z-index: 9;
    width: 100%;
    background: #ffffff;
    height: 0.35rem;
    line-height: 0.35rem;
    box-shadow: 0px 3px 8px #4775d949;
    & p {
      text-align: left;
      font-size: 0.16rem;
      color: #999999;
      margin-left: 0.1rem;
    }
  }
  & .content {
    margin-top: 0.5rem;
  }
}
.my-swipe .van-swipe-item {
  min-height: 85vh;
  color: black;
  font-size: 0.16rem;
  text-align: center;
  & .test-box {
    background-color: #ffffff;
    padding: 0.15rem 0.12rem;
    line-height: 0.25rem;
    & .title {
      text-align: left;
    }
    & .van-radio {
      text-align: left;
      font-size: 0.14rem;
      margin: 0.1rem 0 0.12rem 0;
      & /deep/ .van-radio__label {
        line-height: 0.25rem !important;
      }
    }
  }
  & .answer {
    margin-top: 0.2rem;
    padding: 0.15rem 0.12rem;
    background-color: #ffffff;
    line-height: 0.25rem;
    & .a {
      text-align: left;
      font-size: 0.16rem;
      vertical-align: middle;
      & .van-icon {
        vertical-align: middle;
        margin-right: 0.05rem;
      }
    }
    & .t {
      margin-top: 0.05rem;
      text-align: left;
      color: orange;
    }
    & .c {
      margin-top: 0.05rem;
      text-align: left;
      font-size: 0.14rem;
    }
    & .right {
      text-align: left;
      margin-top: 0.1rem;
    }
  }
}
.img-icon {
  width: 21px;
  height: 21px;
}
.success {
  color: #009c00;
}
.fail {
  color: red;
}
</style>